
html { 
  var(accent-color): window-accent-color; 
  border: window-frame-width solid transparent; 
}

html:owns-focus {
  border-color: morph(color(accent-color), opacity:50%);   
}

html > header { 
  position:fixed; top:0; left:0; width:*; height:window-caption-height; 
  color: #000;
}

html > header:theme(dark) { 
  color: #eee;
}

html > header { width:*; flow:horizontal; height:window-caption-height; margin:0; } 
html > header > window-caption { display:block; line-height:window-caption-height; width:*; padding:0 1em;
                                 white-space: nowrap; overflow-x: hidden; text-overflow:ellipsis; }
html > header > window-buttons { display:block; flow:horizontal; width:max-content; height:*; }
html > header > window-buttons > window-button { 
  behavior:clickable; 
  display:block; 
  height:*; 
  width:window-button-width; 
  foreground-size: 11dip;
  foreground-repeat: no-repeat;
  foreground-position:50% 50%;
  stroke:currentcolor;
  stroke-width:1dip;
  transition: background-color linear 100ms;
}
html > header > window-buttons > window-button:hover { 
  background:rgba(0,0,0,0.25);   
}
html > header > window-buttons > window-button[role="window-close"] { stroke-width:1.44dip; foreground-image: url(path:M0 0 L10 10 M10 0 L0 10); }
html > header > window-buttons > window-button[role="window-close"]:hover { background:rgb(232,17,35); stroke:#fff; }

html > header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 0 H10 V10 H0 Z); }

html[window-state="maximized"] { border-color:transparent; }
html[window-state="maximized"] > header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 2 h8 v8 h-8 Z M2 2 v-2 h8 v8 h-2); }
html > header > window-buttons > window-button[role="window-minimize"] { foreground-image: url(path:M0 0 M0 5 H10 M10 10); }

html > header > picture { size: window-caption-height; foreground-size: 16dip; }

.output { padding-top: window-caption-height; }

@media platform == "OSX" {

  html > header > window-buttons { display:none; }
  html > header > picture { display:none; }
  html > header > window-caption { text-align:center; }

}